<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-week-hot :weekHotList="weekHotList"></home-week-hot>
    <home-recommend :likeList="likeList"></home-recommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import HomeHeader from './components/HomeHeader'
import HomeSwiper from './components/HomeSwiper'
import HomeIcons from './components/HomeIcons'
import HomeRecommend from './components/HomeRecommend'
import HomeWeekend from './components/HomeWeekend'
import HomeWeekHot from './components/HomeWeekHot'
import axios from 'axios'
export default {
  mounted () {
    this.getDataList()
    this._lastCity = this.vuexCity
  },
  /* keepalive事件 */
  activated () {
    if (this._lastCity !== this.vuexCity) {
      this._lastCity = this.vuexCity
      this.getDataList()
    }
  },
  computed: {
    ...mapState({
      vuexCity: 'city'
    })
  },
  data () {
    return {
      swiperList: [],
      iconList: [],
      likeList: [],
      weekendList: [],
      weekHotList: [],
      // eslint-disable-next-line vue/no-reserved-keys
      _lastCity: ''
    }
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend,
    HomeWeekHot
  },
  methods: {
    async getDataList () {
      const {data: res} = await axios.get('/api/data.json?city=' + this.vuexCity)
      if (res.result && res.data) {
        this.swiperList = res.data.swiperList
        this.iconList = res.data.iconList
        this.likeList = res.data.likeList
        this.weekendList = res.data.weekendList
        this.weekHotList = res.data.weekHotList
      }
    }
  }
}
</script>

<style>
</style>
